import React, { Component } from 'react';
import "../../styles/shopCart.css";
import { shopcart_list, shopcart_clear, shopcart_sub, shopcart_add } from "../../api/index";
import { Empty, Stepper, Toast } from 'antd-mobile'
import { DeleteOutline } from 'antd-mobile-icons'
class shopcart extends Component {
    constructor() {
        super()
        this.state = {
            cartlist: [],
            totalprice: 0,
            middle: 1,
            price: 1,
            status: false
        }
    }
    componentDidMount() {
        shopcart_list({ userid: localStorage.getItem('id') }).then((res) => {
            console.log(res.data.list);
            this.setState({
                cartlist: res.data.list
            })
        })
    }
    handleChange(item) {
        console.log(item.ischeck);
        item.ischeck=!item.ischeck
        if (item.ischeck==false) {
            
        }

    }
    delete() {
        shopcart_clear({ userid: localStorage.getItem("id") }).then((res) => {
            console.log(res.data)
            shopcart_list({ userid: localStorage.getItem("id") }).then((res) => {
                console.log(res.data)
                this.setState({
                    shoplist: res.data.list
                })

            })

        })
        Toast.show({
            icon: 'success',
            content: '全部删除',
        })
    }
    tostepper(value, item) {

        console.log('地方' + this.state.middle);
        if (value > this.state.middle) {
            shopcart_add({ userid: localStorage.getItem('id'), goodid: item.id }).then((res) => {
                // console.log(res.data);
                this.state.middle = value
                this.state.price = item.salesPrice.value * this.state.middle

            })
            Toast.show({
                icon: 'success',
                content: '加一',
            })

        }
        else if (value < this.state.middle) {
            shopcart_sub({ userid: localStorage.getItem('id'), goodid: item.id }).then((res) => {
                // console.log(res.data);
                this.state.middle = value
            })
            Toast.show({
                icon: 'success',
                content: '减一',
            })
        }
    }
    render() {
        return (
            <div>
                <div className='shopCart'>
                    <div className='inputbox'>
                        <h3>购物车</h3>
                        <p className='DeleteOutline ' onClick={() => {
                            this.delete()
                        }}><DeleteOutline />
                            清空</p>
                    </div>
                    <div>

                    </div>
                    <div className='Noempty'>
                        {
                            this.state.cartlist.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <input type="checkbox" checked={item.ischeck} onChange={() => { this.handleChange(item) }} />
                                        <img src={item.pic} alt="" />
                                        <div className='word'>
                                            <p> {item.name}</p>
                                            <div className='bujingq'>
                                                <h4>${item.salesPrice.value * item.count}</h4>

                                                <Stepper
                                                    min={1} max={10}
                                                    defaultValue={1}
                                                    onChange={(value) => { this.tostepper(value, item) }}
                                                />
                                            </div>
                                        </div>
                                    </li>
                                )
                            })
                        }

                    </div>

                    {/* <div className='footer'>
                        <input type="checkbox" />全选
                        总价:{ }
                        <button>去结算</button>
                    </div> */}
                </div>
                <>
                    {
                        this.state.cartlist.length == 0 && <Empty />
                    }
                </>
            </div>
        );
    }
}

export default shopcart;